<template>
  <div class="box">
   <div class="fa">
    <van-swipe :autoplay="1500" >
  <van-swipe-item>
<a href="javascript:;">
  <img src="http://liufusong.top:8080/img/swiper/1.png" alt />
</a>
</van-swipe-item>
  <van-swipe-item>
<a href="javascript:;">
  <img src="http://liufusong.top:8080/img/swiper/2.png" alt />
</a>
</van-swipe-item>
  <van-swipe-item>
<a href="javascript:;">
  <img src="http://liufusong.top:8080/img/swiper/3.png" alt />
</a>
</van-swipe-item>
</van-swipe>
   </div>
<div class="son">
      <van-search v-model="value" placeholder="请输入搜索关键词" background="none"/>
    </div>
<div class="list">
  <van-grid icon-size="45" icon-color="#4fc8d">
  <van-grid-item icon="wap-home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="location-o" text="地图找房" />
  <van-grid-item icon="cashier-o" text="去出租" />
</van-grid>
</div>
<div class="data">
  <div class="txt">
    <p class="ip">租房小组</p>
    <p class="op">更多</p>
  </div>
  <van-grid :column-num="2" direction="horizontal" gutter="10" icon-size="50">
  <van-grid-item icon="photo-o" text="家住回龙观" />
  <van-grid-item icon="photo-o" text="家住回龙观" />
  <van-grid-item icon="photo-o" text="家住回龙观" />
  <van-grid-item icon="photo-o" text="家住回龙观" />
</van-grid>
  </div>
  </div>
</template>

<script>
// import { getSwiper } from '../api/index'
export default {
  name: 'HaokeHome',

  data () {
    return {
      value: ''
    }
  },
  // created () {
  //   this.getSwiperList()
  // },
  mounted () {},

  methods: {
    // async getSwiperList () {
    //   const res = await getSwiper()
    //   console.log(res.body)
    //   // const newList = res.body.filter(item => item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
    //   // console.log(newList)
    //   // this.images = newList
    // }
  }
}
</script>

<style lang=less scoped>
.box{
  background-color: #e3e3e3;
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
    height: 200px;
  }
  img{
    width: 100%;
    /* height: 100% */
  }
  .son{
    position: absolute;
    z-index: 999;
    width:310px;
    left: 30px;
    height: 34px;
    top: 20px;
  }
  .list{
    height:121px;
    padding-top: 20px;
    background-color: #fff;
  }
  .van-grid-item__icon{
    color: #00ae66;
  }
  .txt{
    display: flex;
    justify-content:space-between;
    padding: 0 25px;
  }
  .txt .ip{
    font-weight: 700;
  }
  .txt .op{
    color: #999;
  }
  .data{
    width: 375px;
    height: 250px;
  }
  .yu{
    display: flex;
  }
  .yu .left{
    width: 50px;
    height: 50px;
    background-color: green;
  }
   .yu ul{
    display: flex;
    /* flex: 1; */
    flex-wrap: wrap;
     align-items: center;
    justify-content: center;
   }
   .yu .right{
    height: 60px;
    width: 172px;
    font-size: 12px;
   }
  .yu li {
    margin-top: 10px;
    margin-right: 10px;
    width: 172px;
    height: 60px;
    background-color: red;
  }
</style>
